BFC

BFC

Block fomatting context (简称BFC)
Inline formatting context (简称IFC)
CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC

BFC 定义：
BFC直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

这些元素会触发BFC:（子元素有浮动 直接在父元素上添加一下内容即可）
1、根元素 -- HTML元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex，
5、overflow不为visible
6、flow-root 意为：触发BFC 兼容不太好 css新加的

---

BFC功能：
1、让BFC内部元素被包起来
2、让两个相邻元素界限分明

应用场景

BFC 使用场景
面试。。。。剩下时间 避免使用
不要用BFC清除浮动（BFC清除有副作用 用clear：both 或者 display：flow-root ）

 //BFC可以包住浮动元素
    
    .father{}
    .child{
        height:100px;
        background:rgba(0,255,0,1);
        margin-top:100px;
    }
    
    //这个父级的高度是从子级开始的 ！！！
    //除非触发BFC（加overflow：hidden）父级高度才会从顶部计算

    // 用flow + div 做左右布局
    .father{
        width:100px;
        min-height:600px;
        border:3px solid red;
        float:left;
        margin-right:20px;
    }
    .child{
        min-height:600px;
        border:5px solid green;
        overflow:auto; // display:flow-root
        //如果没有这个BFC 就会跟这个浮动元素不清不楚 想让这两个分隔
    }

BFC 和 文档流

文档流 影响的是这个元素的排列顺序
BFC 影响的是这个元素的宽高